<template>
  <div class="prediction-wrapper">
    <div class="prediction-search">
      <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
        <px-form-item label="日期" style="width: 416px !important" prop="timeRange">
          <px-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
      </px-form>
    </div>
    <div class="prediction-chart">
      <echartsChart ref="lineRef" :boxShadow="false" :options="lineOptions" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRefs, ref, computed, nextTick, toRaw, watch } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import { queryGasFuture } from "@/api/machineClass";
import echartsChart from "@/views/common/components/echartsChart/index.vue";

defineOptions({
  name: "MACHINE_GAS_PREDICT"
});

const router = useRouter();
const route = useRoute();

const queryParams = reactive({
  timeRange: [
    dayjs(new Date(new Date().getFullYear(), new Date().getMonth(), 1)).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)).format("YYYY-MM-DD HH:mm:ss")
  ]
});

const lineOptions = ref(null);

const lineRef = ref(null);

const handleQuery = async () => {
  if (!queryParams.timeRange) {
    PxMessage.error("时间不能为空");
    return;
  }
  let res = await queryGasFuture({
    startTime: dayjs(queryParams.timeRange[0]).format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs(queryParams.timeRange[1]).format("YYYY-MM-DD HH:mm:ss"),
    timePeriod: "day"
  });
  let xData = res["Actual_load_Ntag"]?.map(v => dayjs(v.date).format("YYYY-MM-DD")) || [];
  let seriesData = [
    // {
    //   name: "Actual Supply",
    //   type: "line",
    //   connectNulls: true,
    //   // smooth: true,
    //   showSymbol: false,
    //   lineStyle: {
    //     color: "#00B36D" // 线条颜色
    //   },
    //   data: res["Actual_supply_Ntag"]?.map(v => v.value) || []
    // },
    // {
    //   name: "AI Predicted Supply",
    //   type: "line",
    //   connectNulls: true,
    //   // smooth: true,
    //   showSymbol: false,
    //   lineStyle: {
    //     color: "#00B36D", // 线条颜色
    //     type: "dashed" // 线条类型设置为虚线
    //   },
    //   data: res["AI_Predicated_supply_Ntag"]?.map(v => v.value) || []
    // },
    {
      name: "Actual Load",
      type: "line",
      connectNulls: true,
      // smooth: true,
      // showSymbol: false,
      // lineStyle: {
      //   color: "#3B82F6" // 线条颜色
      // },
      data: res["Actual_load_Ntag"]?.map(v => v.value) || []
    },
    {
      name: "AI Predicted Load",
      type: "line",
      connectNulls: true,
      // smooth: true,
      // showSymbol: false,
      lineStyle: {
        // color: "#3B82F6", // 线条颜色
        type: "dashed" // 线条类型设置为虚线
      },
      data: res["AI_Predicated_load_Ntag"]?.map(v => v.value) || []
    }
  ];
  lineOptions.value = {
    title: {
      text: `Natural Gas Supply and Calculated Load Indicators With Dual Y-Axes`,
      left: "center"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["Actual Load", "AI Predicted Load"],
      top: "middle",
      right: 0,
      orient: "vertical"
    },
    grid: {
      left: "3%",
      right: "10%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xData
    },
    yAxis: {
      type: "value"
    },
    series: seriesData
  };
  // lineRef.value?.updateEchartsOption();
  lineRef.value?.forceUpdateEcharts();
};
const resetQuery = () => {
  queryParams.timeRange = [
    dayjs(new Date(new Date().getFullYear(), new Date().getMonth(), 1)).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)).format("YYYY-MM-DD HH:mm:ss")
  ];
};
onMounted(() => {
  handleQuery();
});
</script>
<style scoped lang="scss">
.prediction-wrapper {
  padding: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;

  .prediction-chart {
    height: 300px;
  }
}

:deep(.echarts-chart) {
  height: 300px;
  padding: 0;

  .echarts-chart-com {
    height: 100%;
    margin-top: 12px;
  }
}
</style>
